import { Button, Form, Input, Modal, Select } from "antd";
import React from "react";

function FormBox({ isModalOpen, title, handleCancel, onSubFn, form }) {
  const onFinish = (values) => {
    onSubFn({
      id: values.id,
      name: values.name,
      job: values.job,
    });
  };
  return (
    <div>
      <Modal
        title={title}
        onCancel={handleCancel}
        open={isModalOpen}
        footer={null}
      >
        <Form onFinish={onFinish} form={form}>
          <Form.Item name="id" hidden label="">
            <Input />
          </Form.Item>
          <Form.Item name="name" label="姓名">
            <Input />
          </Form.Item>
          <Form.Item name="job" label="岗位">
            <Select>
              <Select.Option value="销售员"></Select.Option>
              <Select.Option value="总经理"></Select.Option>
              <Select.Option value="销售助理"></Select.Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit">提交</Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default React.memo(FormBox);
